<template>
	<view class="wrap">
		<view class="topBc"></view>
		<view class="content formWrap">
			<view class="title" style="margin-top: 0;">股东及出资信息</view>

			<view class="listWrap">
				<view class="list" v-for="item,index in list" :key="index">
					<view class="lineWrap">
						
						<view class="line">
							<view class="tit">股东发起人</view>
							<view class="con">
								<u-input v-model="item.invname" placeholder="请输入" border="none" inputAlign="center"></u-input>
							</view>
						</view>
						<view class="line">
							<view class="tit">认缴出资额（万元）</view>
							<view class="con">
								<u-input v-model="item.lisubconam" placeholder="请输入" border="none" inputAlign="center"></u-input>
							</view>
						</view>
						<view class="line">
							<view class="tit">认缴出资时间</view>
							<view class="con uni-datetime-picker_wrap">
								<uni-datetime-picker 
									v-model="item.subcondate" 
									placeholder="请选择" 
									type="date" :border="false"
									:clear-icon="false"
									return-type="timestamp"
								/>
							</view>
						</view>
						<view class="line_across">
							<view class="line_across_tit">认缴出资方式</view>
							<view class="line_across_con">
								<u-checkbox-group v-model="item.subconform" placement="row" @change="checkboxChange">
									<u-checkbox :activeColor="bgColor" :label="ite.name" :name="ite.id" v-for="ite,ind in typeList" :key="ind"></u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
						
						<view class="line">
							<view class="tit">实缴出资额（万元）</view>
							<view class="con">
								<u-input v-model="item.liacconam" placeholder="请输入" border="none" inputAlign="center"></u-input>
							</view>
						</view>
						<view class="line">
							<view class="tit">实缴出资时间</view>
							<view class="con uni-datetime-picker_wrap">
								<uni-datetime-picker 
									v-model="item.accondate" 
									placeholder="请选择" 
									type="date" :border="false"
									:clear-icon="false"
									return-type="timestamp"
								/>
							</view>
						</view>
						<view class="line_across">
							<view class="line_across_tit">实缴出资方式</view>
							<view class="line_across_con" style="border-bottom: 0;">
								<u-checkbox-group v-model="item.acconform" placement="row" @change="checkboxChange">
									<u-checkbox :activeColor="bgColor" :label="ite.name" :name="ite.id" v-for="ite,ind in typeList" :key="ind"></u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</view>
					
					<view class="deleteBtn" @click="deleteBtn(index)">
						<view class="text">移</view>
						<view class="text">除</view>
					</view>

				</view>
				<view class="addBtnWrap">
					<u-button text="添加" @click="addBtn()" :color="bgColor"></u-button>
				</view>
			</view>
			
		</view>
		<view class="submitBtn_bc"></view>
		<view class="submitBtn_ubtn">
			<u-button :disabled="!$util.submitState(year,state)" @click="submit()">提交</u-button>
		</view>
		
	</view>
</template>

<script>
export default {
	data(){
		return{
			minFormName: 'subcapital', //小表单类型名
			regnoInfo: this.$store.state.regnoInfo,
			year: '',
			state: '',
			bgColor: this.$config.bgColor,
			
			typeList: [],
			
			list: [],
		}
	},
	onLoad(option) {
		this.year = option.year;
		this.state = option.state;
		this.typeList = this.$util.getLocalDictMap('conform','id','name');
		this.getWebList();
	},
	methods:{
		checkboxChange(e){
			console.log(e,this.list);
		},
		submit(){
			let _this = this;
			let sta = true;
			if(this.list.length>0){
				let data = this.list[this.list.length-1];
				let keys = Object.keys(data);
				for(let i=0; i<keys.length; i++){
					if(!data[keys[i]] || data[keys[i]].length<=0){
						this.$util.showToast({title:'请完善信息！'})
						sta = false;
						break;
					}
				}
			}
			
			if(sta){
				this.webListSave();
			}
		},
		webListSave(){
			let arr = this.list;
			arr.forEach(item=>{
				let subconform = item.subconform.join('|');
				item.subconform = subconform;
				let acconform = item.acconform.join('|');
				item.acconform = acconform;
			})
			this.$http.sendRequest({
				url: '/annual/report/subcapital/overwrite',
				method: 'PUT',
				data: {
					ancheyear: this.year,
				    regno: this.regnoInfo.regno,
				    subcapitalList: arr
				}
			})
			.then(res=>{
				this.setRecord();
			})
			.catch(err=>{})
		},
		getWebList(){
			let url = this.$typeData.minFormUrl.get(this.minFormName);
			if(!url){
				uni.showModal({
					title: '暂无接口'
				})
				return;
			}
			this.$http.sendRequest({
				url: url,
				data: {
					regno: this.regnoInfo.regno,
					ancheyear: this.year
				}
			})
			.then(res=>{
				console.log('获取列表',res);
				let arr = [];
				if(res.data && res.data.length>0){
					res.data.forEach(item=>{
						let subconform = item.subconform.split('|');
						let acconform = item.acconform.split('|');
						let obj = {
							invname: item.invname,
							lisubconam: item.lisubconam,
							subcondate: item.subcondate,
							subconform: subconform,
							liacconam: item.liacconam,
							accondate: item.accondate,
							acconform: acconform,
						}
						arr.push(obj)
					})
				}
				this.list = arr;
			})
			.catch(err=>{})
		},
		addBtn(){
			if(this.list.length>0){
				let data = this.list[this.list.length-1];
				let keys = Object.keys(data);
				for(let i=0; i<keys.length; i++){
					if(!data[keys[i]] || data[keys[i]].length<=0){
						this.$util.showToast({title:'请先完善信息！'})
						return;
					}
				}
			}
			let obj = {
				invname: '',
				lisubconam: '',
				subcondate: '',
				subconform: '',
				liacconam: '',
				accondate: '',
				acconform: '',
			}
			this.list.push(obj);
		},
		deleteBtn(index){
			this.list.splice(index,1);
		},
		
		
		//存一下记录
		setRecord(){
			let fillingItem = this.$minFormType.get(this.minFormName);
			this.$http.sendRequest({
				url: '/annual/report/record',				method: 'POST',				data: {					regno: this.regnoInfo.regno,					year: this.year,					fillingItem: fillingItem,					isImp: '0',				},
				hideLoad: true,
			})
			.then(res=>{
				uni.navigateBack();
			})
			.catch(err=>{})
		},
		goPage(path){
			uni.navigateTo({
				url: path
			})
		},
	}
}
</script>

<style lang="scss">
.wrap{
	width: 100vw;
	min-height: 100vh;
	padding-top: 16rpx;
	box-sizing: border-box;
	position: relative;
	background-color: #FFF;
	
	.topBc{
		height: 10rpx;
		background-color: #F5F6F8;
	}
}

.content{
	padding: 30rpx 36rpx;
	background-color: #FFF;
	
	.title{
		color: #E4B269;
		font-size: 36rpx;
		font-weight: bold;
		border-left: 8rpx solid #E4B269;
		line-height: 40rpx;
		padding-left: 16rpx;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}
	
	.listWrap{
		width: 100%;
		margin-top: 30rpx;
		
		.list{
			width: 100%;
			min-height: 190rpx;
			background-color: #FFF;
			border: 2rpx solid $uni-bg-color;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			
			.lineWrap{
				width: 90%;
				
				.line{
					width: 100%;
					height: 64rpx;
					display: flex;
					align-items: center;
					
					.tit{
						width: 60%;
						height: 100%;
						box-sizing: border-box;
						font-size: 28rpx;
						font-weight: bold;
						display: flex;
						justify-content: center;
						align-items: center;
						border-right: 2rpx solid $uni-bg-color;
						border-bottom: 2rpx solid $uni-bg-color;
						color: $uni-bg-color;
					}
					.con{
						width: 40%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						border-right: 2rpx solid $uni-bg-color;
						border-bottom: 2rpx solid $uni-bg-color;
						padding: 0 16rpx;
						color: #000;
					}
				}
				
				.line_across{
					width: 100%;
					
					.line_across_tit{
						height: 64rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: bold;
						color: $uni-bg-color;
						border-right: 2rpx solid $uni-bg-color;
					}
					.line_across_con{
						width: 100%;
						padding: 0rpx 16rpx 10rpx;
						box-sizing: border-box;
						border-right: 2rpx solid $uni-bg-color;
						border-bottom: 2rpx solid $uni-bg-color;
						
						.u-checkbox-group{
							display: flex;
							flex-flow: wrap;
						}
						.u-checkbox{
							margin: 0 10rpx 10rpx;
						}
					}
					
				}
				
			}
			
			
			
			.deleteBtn{
				width: 10%;
				padding: 20% 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: rgba(249,81,81,0.9);
				font-weight: bold;
				
				.text{
					font-size: 28rpx;
					color: #FFF;
					
				}
			}
			
		}
		
		.addBtnWrap{
			width: 300rpx;
			margin: 30rpx auto 0;
			display: flex;
			justify-content: center;
		}
	}
}




.uni-datetime-picker_wrap .icon-calendar{
	display: none;
}
.uni-datetime-picker_wrap .uni-date-x{
	background-color: rgba(0, 0, 0, 0);
}
.uni-datetime-picker_wrap .uni-date__x-input{
	font-size: 28rpx;
	text-align: center;
}
.uni-datetime-picker_wrap .uni-date-editor{
	height: 100% !important;
}
.uni-datetime-picker_wrap .uni-date-editor--x{
	height: 100% !important;
}
.uni-datetime-picker_wrap .uniui-calendar{
	display: none;
}
.uni-datetime-picker_wrap .uni-datetime-picker--btn{
	background-color: $uni-bg-color !important;
}
.uni-datetime-picker_wrap .uni-calendar-item__weeks-box .uni-calendar-item--checked {
	background-color: $uni-bg-color !important;
}
.uni-datetime-picker_wrap .uni-calendar-item--multiple .uni-calendar-item--before-checked, 
.uni-calendar-item--multiple .uni-calendar-item--after-checked {
	background-color: $uni-bg-color !important;
}
.uni-datetime-picker_wrap .uni-calendar-item--multiple {
	background-color: rgba(170,170,170,0.7) !important;
}
.uni-datetime-picker_wrap .uni-calendar-item__weeks-box-item{
	background-color: rgba(0,0,0,0) !important;
}

</style>